<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#canvas {
				background: #fff;
				background-size: cover;
				width: 100%;
				height: 90vh;
			}
			
			body {
				margin: 0;
			}
			img{
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="canvas">

		</div>

		<img src="imgs/test.png" id="img1" />
		<img src="imgs/test1.jpg" id="img2" />

		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<script src="js/zrender.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			var zr = zrender.init(document.getElementById('canvas'));

			var img1 = document.getElementById("img1"),
				img2 = document.getElementById("img2");

			var flags = {},
				options = {
					level: 1,
					time: 60000,
					score: 0,
				}

			var interval,
				start = false;

			var viewH = zr.getHeight(),
				viewW = zr.getWidth(),
				dis = 10,
				direction = 0,
				userPosition = {
					x: viewW / 2 - 50,
					y: viewH - 110
				};
			var circle = new zrender.Circle({
				shape: {
					cx: 150,
					cy: 50,
					r: 40
				},
				style: {
					fill: '#efefef',
					stroke: '#F00'
				}
			});
			var user = new zrender.Image({
				position: [userPosition.x, 0],
				scale: [1, 1],
				style: {
					x: 0,
					y: userPosition.y,
					image: img1,
					width: 100,
					height: 100
				},
				draggable: false
			})
			zr.add(user);

			var animate = user.animate('', false);

			zr.on('click', function(params) {
//				console.log(params);
//				clearInterval(interval);
//				if($(user.style.image).attr("src") == "imgs/test.png") {
//					user.attr("style", {
//						image: img2,
//					})
//				} else {
//					user.attr("style", {
//						image: img1,
//					})
//				}
				if(start == false) {
					start = true;
					interval = setInterval(function() {
//						if($(user.style.image).attr("src") == "imgs/test.png") {
//							user.attr("style", {
//								image: img2,
//							})
//						} else {
//							user.attr("style", {
//								image: img1,
//							})
//						}

						if(options.time % 5000 == 0) {
							var rdm = Math.random();
							var img;
							var obj = {

							}
							if(rdm >= 0.6) {
								obj.type = 'flag';
								img = img1;
							} else {
								obj.type = "enemy";
								img = img2;
							}
							var xx = (Math.random() * viewW - 50);
							var id = "flag"+xx;
							obj.main = new zrender.Image({
								position: [xx, 0],
								scale: [1, 1],
								style: {
									x: 0,
									y: 0,
									image: img,
									width: 100,
									height: 100
								},
								draggable: false
							});
							zr.add(obj.main);
							var tt = 10000*(viewH-100)/viewH;
							obj.main.animate("", false)
								.when(tt, {
									position: [xx, viewH-100]
								})
								.when(10000,{
									position: [xx, viewH]
								})
								.during(function(){
									var lx = obj.main.position[0];
									var ly = obj.main.position[1];
									var cx = user.position[0];
									console.log("??");
									if(ly>=viewH-200){
										
										if(cx+100>=lx&&cx<=lx+100){
											console.log();
											zr.clearAnimation();
											alert("碰到了！Gameover!");
											clearInterval(interval)
										}
									}
									
								})
								.done(function() {
									console.log("落到地了！");
									console.log(id);
									delete(flags[id]);
								})
								.start();
							flags[id] = obj;
							console.log(flags);
						}
						options.time -= 5000;
					}, 5000);
				}

				//				return false;
				var s;
//				console.log(user.position);
				var x = user.position[0];
				if(direction == 0) {
					direction = 1;
					s = (viewW - 100) - x
				} else {
					direction = 0;
					s = x
				}
				var v = (viewW - 100) / 4;
				var t = 1000 * s / v;
//				console.log(direction);
				animate.stop();
				animate = user.animate('', false)
					.when(t, {
						position: [(viewW - 100) * direction, 0]
					})
					.done(function() {
						// Animation done
						console.log();
						zr.clearAnimation();
						alert("你输了！");
						clearInterval(interval)
					})
					.start();
			});
		</script>
	</body>

</html>